<template>
	<view class="my_enter_page">
		<!-- 顶部搜索 -->
		<view class="search-top">
			<Topsearch :searchKeyWord="searchKeyWord" :showFocus="showFocus" @searchEvent="searchOut" :showCate='false' @searchClear='searchOut'></Topsearch>
		</view>
		
		<!-- 列表 -->
		<view class="my_enter_content" v-for="(item,index) in list_data" :key="index" @click="gotoDetail(item)">
			<view class="l">
				<image :src="item.imgAddrs" mode=""></image>
			</view>
			<view class="r">
				<view class="title">
					{{item.activitiesTopic}}
				</view>
				<view class="time">
					{{item.startTime}}
				</view>
				<view class="bottom">
					<view class="">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/local.png" ></image>
					</view>
					<view class="city">
						{{item.cityName}}
					</view>
					<view class="status" :class="item.status==0?'':(item.status==1?'ing':'end')">
						{{item.stateLabel?item.stateLabel:''}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="parseFloat(total)===0">
			<view class="sysNodata">
				<image src="../../static/nomorepro.png" mode=""></image>
				<view class="sysNodataTitle">
					暂无相关数据
				</view>
			</view>
		</view>
		<view class="sysBottomShow" v-if="show_line&&parseFloat(total)!=0&&list_data.length>4">
			我是有底线的
		</view>
	</view>
</template>

<script>
	import Topsearch from '@/components/top-search-tab.vue'
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				searchKeyWord: '',
				pageNum: 1,
				list_data: [],
				show_line:false,
				total:-1,
				showFocus:false
			}
		},
		components: {
			Topsearch
		},
		onLoad() {
			this.queryOrderForCenter()
		},
		onReachBottom() {
			if(show_line) return
			this.pageNum++;
			this.queryOrderForCenter()
		},
		methods: {
			// 搜索
			searchOut(e) {
				this.list_data = [];
				this.pageNum = 1;
				this.searchKeyWord = e.keyWord
				this.queryOrderForCenter()
			},
			//获取列表信息
			queryOrderForCenter() {
				let that = this;
				
				uni.showLoading({
				    title: '加载中'
				});
				this.$request.get({
					url: 'innovationActivities/queryOrderForCenter',
					data: {
						pageNum: this.pageNum,
						keyword: this.searchKeyWord
					}
				}).then(res => {
					that.list_data = [...that.list_data, ...res.list]
					that.show_line = res.isLastPage
					this.total = res.total
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			},
			//跳转详情页
			gotoDetail(item) {
				if(!permissionJudge('web:activities:info')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				uni.navigateTo({
					url: "/pagesB/my-enter-detail/my-enter-detail?id=" + item.payOrderId
				});
			}
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.show_line = false;
			this.list_data = [];
			this.queryOrderForCenter();
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			if (!this.show_line) {
				this.pageNum += 1
				this.queryOrderForCenter();
			}
		},
	}
</script>

<style scoped lang="less">
	.search-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	.my_enter_page {
		.bottom-line {
			line-height: 87upx;
			text-align: center;

			span {
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(182, 182, 182, 1);
				position: relative;

				&::before {
					content: '';
					display: block;
					position: absolute;
					width: 115upx;
					height: 1upx;
					background-color: #E0E0E0;
					top: 50%;
					transform: translateY(-50%);
					left: -153upx;
				}

				&::after {
					content: '';
					display: block;
					position: absolute;
					width: 115upx;
					height: 1upx;
					background-color: #E0E0E0;
					top: 50%;
					transform: translateY(-50%);
					right: -153upx;
				}
			}
		}
	}


	.my_enter_page .searc-tab {
		background: #fff !important;
		margin-bottom: 28upx;
	}

	.my_enter_page .search-input {
		background: #f4f4f4 !important;
	}

	.my_enter_page {
		background: #F5F6F9;
		height: 100%;
		box-sizing: border-box;
		padding-top: 100upx;
	}

	.my_enter_page .my_enter_content {
		background: #fff;
		width: 100%;
		height: 245upx;
		margin: 0 auto 18upx;
		display: flex;
		align-items: center;
		box-shadow:0upx 3upx 15upx 0upx rgba(0,0,0,0.04);
		border-radius:6upx;
	}

	.my_enter_page .my_enter_content .l image {
		width: 270upx;
		height: 170upx;
		margin-left: 27upx;
		background-color: #f9f9f9;
	}

	.my_enter_page .my_enter_content .r {
		flex: 1;
		height: 100%;
		margin: 0 30upx;
		padding: 35upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.my_enter_page .my_enter_content .r .title {
		width: 336upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28upx;
		font-weight: bold;
		color: #333333;
		line-height: normal;
	}

	.my_enter_page .my_enter_content .r .time {
		color: #222222;
		font-size: 22upx;
		line-height: normal;
	}

	.my_enter_page .my_enter_content .r .bottom {
		display: flex;
		font-size: 26upx;
		line-height: normal;
		align-items: center;
	}

	.my_enter_page .my_enter_content .r .bottom .city {
		flex: 1;
		font-size:24upx;
		font-weight:400;
		color:rgba(123,123,123,1);
		width: 200upx;
		line-height: 30upx;
		height: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: keep-all;
	}

	.my_enter_page .my_enter_content .r .bottom image {
		width: 16upx;
		height: 21upx;
		margin-right: 5upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 4upx;
	}

	.my_enter_page .my_enter_content .r .bottom .status {
		flex: 1;
		text-align: right;
		color: #2A7DFA;
	}

	.my_enter_page .my_enter_content .r .bottom .status.end {

		color: #5A5A5A;
	}

	.my_enter_page .my_enter_content .r .bottom .status.ing {
		color: #F7B500;
	}
</style>
